@page
@{ Layout = "_LayoutHome"; }
@section Styles{
  <style>
    body {
      background: #f5f5f5;
    }
    .el-tabs--top {
      margin-top: -15px;
    }
    .el-input-group__append {
      padding: 0;
    }
    .el-input-group__prepend {
      padding: 0 15px;
    }
    .el-icon-mobile-phone:before,
    .el-icon-user-solid:before,
    .el-icon-lock:before,
    .el-icon-chat-line-square:before,
    .el-icon-picture:before {
      width: 12px;
      font-size: 18px;
    }
    .wrapper-page {
      margin: 7.5% auto;
      max-width: 380px;
    }
  </style>
}

<div class="wrapper-page">
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>{{ homeTitle }}</span>
    </div>

    <el-tabs v-if="isSmsEnabled" v-model="form.type" :stretch="true" v-on:tab-click="btnTypeClick">
      <el-tab-pane label="使用账号登录" name="account"></el-tab-pane>
      <el-tab-pane label="使用短信登录" name="mobile"></el-tab-pane>
    </el-tabs>

    <el-alert v-if="pageAlert" style="margin-bottom: 10px;" :closable="false" :type="pageAlert.type" v-html="pageAlert.title"></el-alert>

    <el-form v-on:submit.native.prevent v-show="form.type == 'account'" ref="formAccount" :model="form" size="medium" label-width="0" status-icon>
      <el-form-item prop="account" :rules="[{ required: true, message: '请输入用户名/手机号/邮箱' }]">
        <el-input ref="account" v-model="form.account" placeholder="请输入用户名/手机号/邮箱" autocomplete="off" v-on:keyup.enter.native="btnSubmitClick">
          <template slot="prepend">
            <i class="el-icon-user-solid"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password" :rules="[{ required: true, message: '请输入密码' }]">
        <el-input v-model="form.password" type="password" name="password" placeholder="请输入密码" autocomplete="off" v-on:keyup.enter.native="btnSubmitClick">
          <template slot="prepend">
            <i class="el-icon-lock"></i>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item v-if="!isUserCaptchaDisabled" prop="captchaValue" :rules="[{ required: true, message: '请输入验证码' }]">
        <el-input v-model="form.captchaValue" placeholder="请输入验证码" autocomplete="off" v-on:keyup.enter.native="btnSubmitClick">
          <template slot="prepend">
            <i class="el-icon-picture"></i>
          </template>
          <template slot="append">
            <a href="javascript:;" v-on:click="btnCaptchaClick">
              <img v-show="captchaUrl" style="display: none; height: 30px;" :src="captchaUrl">
            </a>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <el-form v-on:submit.native.prevent v-show="form.type == 'mobile'" ref="formMobile" :model="form" size="medium" label-width="0" status-icon>
      <el-form-item prop="mobile" :rules="[
        { required: true, message: '请输入手机号码' },
        { validator: utils.validateMobile, message: '请输入有效的手机号码' }
      ]">
        <el-input ref="mobile" placeholder="请输入手机号码" v-model="form.mobile" v-on:keyup.enter.native="btnSubmitClick">
          <template slot="prepend">
            <i class="el-icon-mobile-phone"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="code" :rules="[{ required: true, message: '请输入短信验证码' }]">
        <el-input v-model="form.code" autocomplete="off" placeholder="请输入短信验证码" v-on:keyup.enter.native="btnSubmitClick">
          <template slot="prepend">
            <i class="el-icon-chat-line-square"></i>
          </template>
          <template slot="append">
            <el-link :underline="false" v-on:click.prevent="btnSendSmsClick" style="padding: 0 15px;">
              {{ countdown > 0 ? countdown + '秒': '获取验证码' }}
            </el-link>
          </template>
        </el-input>
      </el-form-item>
    </el-form>

    <el-divider></el-divider>
    <div style="height: 10px"></div>
    <div>
      <el-checkbox v-model="form.isPersistent" style="margin-right: 10px; margin-bottom: 5px;">
        保持登录状态
      </el-checkbox>
      <el-link style="float: right;" v-if="isSmsEnabled" v-on:click="redirectLostPassword" :underline="false" style="margin-left: 10px">忘记密码？</el-link>
    </div>
    <div style="margin: 10px 0;">
      <el-button type="primary" style="width: 100%" v-on:click="btnSubmitClick">登 录</el-button>
    </div>
    <div v-if="isUserRegistrationAllowed">
      <el-button type="default" style="width: 100%" v-on:click="btnRegisterClick">注 册</el-button>
    </div>

  </el-card>
</div>

@section Scripts{
  <script src="/sitefiles/assets/lib/md5-2.10.0.min.js" type="text/javascript"></script>
  <script src="/sitefiles/assets/js/home/login.js" type="text/javascript"></script>
}